<!-- <template>
  <div>
    <div style="display:flex;justify-content: end;">
      <a-button type="primary" @click="clickQuery">
        <template #icon>
          <SearchOutlined />
        </template>查询
      </a-button>
      <a-button type="primary" danger @click="clickAdd" :v-if="clickAdd" style="margin-left:15px">
        <template #icon>
          <SearchOutlined />
        </template>新增
      </a-button>

      <a-upload v-if="uploadFun" v-model:file-list="fileList" name="file" action=""
        :custom-request="customRequest" accept=".xls,.xlsx">
        <a-button type="primary" style="margin-left:15px">
          <upload-outlined></upload-outlined>
          导入excel
        </a-button>
        <template #itemRender="{ file, actions }">
          <span></span>
        </template>
      </a-upload>

      <a-button type="primary" v-if="uploadFun" danger @click="clickTemplate"
        style="margin-left:15px">
        <template #icon>
          <SearchOutlined />
        </template>模板
      </a-button>

    </div>

    <el-table id="out-table" :data="tableData" style="width: 100%;margin-top:10px;" height="600"
      :header-row-class-name="tableHeader" row-key="props">
      <el-table-column v-if="selection" type="selection" width="55"
        :align="align"></el-table-column>

      <template v-for="(item ,index) in columns">
        <el-table-column align="center" v-if="item.isSlot" :prop="item.props" :label="item.label"
          :key="index" :width="item.width ? item.width : ''">
          <template #default="scope">
            <slot :name="item.slotName" :data="scope" />
          </template>
        </el-table-column>

        <el-table-column v-else align="center" :key="item.props" :prop="item.props"
          :label="item.label" :width="item.width ? item.width : ''"></el-table-column>

      </template>
    </el-table>
  </div>
</template>
<script>
import { computed, defineComponent, ref } from 'vue';
import { message, notification } from 'ant-design-vue';

export default defineComponent({
  props: {
    columns: Array,
    tableData: Array,
    total_size: Number,
    page_no: Number,
    page_size: Number,
    loading: Boolean,
    uploadFun: Function,
    templateName: String,
    tableScroll: Object,
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  emits: {},

  setup(props, context) {
    const { emit } = context;
    const pagination = computed(() => ({
      total: props.total_size,
      current: props.page_no,
      pageSize: props.page_size,
    }));
    const fileList = ref([]);
    const uploading = ref(false);
    const beforeUpload = (file) => {
      // fileList.value = [...fileList.value, file];
      //单文件
      fileList.value = [file];
      return false;
    };

    const customRequest = async ({ file }) => {
      const formData = new FormData();
      const fileName = file.name;
      formData.append('file', file, fileName);
      uploading.value = true;
      const res = await props.uploadFun(formData);
      if (res.success) {
        clickQuery();
        message.success('导入成功!');
      } else {
        message.error('导入失败:' + res.rtn_message);
      }
      fileList.value = [];
      uploading.value = false;
    };

    const handleTableChange = ({ pageSize, current }, filters, sorter) => {
      emit('update:page_no', current);
      emit('update:page_size', pageSize);
      emit('clickQuery');
    };

    // const handleCurrentChange = (pageNo) => {
    //   emit('update:page_no', pageNo)
    //   emit('clickQuery')
    // }

    const clickQuery = () => {
      emit('clickQuery');
    };

    const clickEdit = (record) => {
      emit('clickEdit', record);
    };

    const clickAdd = (record) => {
      emit('clickAdd', record);
    };

    const onDelete = (record) => {
      emit('clickDelete', record);
    };

    const clickTemplate = () => {
      if (props.templateName) {
        let link = document.createElement('a');
        link.style.display = 'none';
        let host = window.location.host;
        const filePath =
          'http://' + host.split(':')[0] + ':8081/files/' + props.templateName;
        console.log('filePath', filePath);
        link.href = filePath;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
      }
    };

    console.log('tableScroll', props.tableScroll);

    return {
      pagination,
      clickQuery,
      handleTableChange,
      clickEdit,
      clickAdd,
      onDelete,
      fileList,
      uploading,
      customRequest,
      clickTemplate,
    };
  },
});
</script> -->